<template>
  <div class="mt-field">
    <van-field
      value="{{value}}"
      icon="{{icon}}"
      label="{{label}}"
      error="{{error}}"
      fixed="{{fixed}}"
      focus="{{focus}}"
      center="{{center}}"
      isLink="{{isLink}}"
      disabled="{{disabled}}"
      readonly="{{readonly}}"
      error-message="{{errorMessage}}"
      placeholder="{{placeholder}}"
      useIconSlot="{{useIconSlot}}"
      useButtonSlot="{{useButtonSlot}}"
      showConfirmBar="{{showConfirmBar}}"
      placeholderStyle="{{placeholderStyle}}"
      maxlength="{{maxlength}}"
      type="{{type}}"
      bind:change="onChange"
    ><slot></slot></van-field>
  </div>
</template>

<script>
  const liveBehavior = require('../../behaviors/live.behavior')

  export default {
    behaviors: [
      'wx://form-field',
      liveBehavior
    ],
    relations: {
      '../mt-liveform/index': {
        type: 'ancestor', // 关联的目标节点应为祖先节点
      },
    },
    properties: {
      icon: String,
      label: String,
      error: Boolean,
      fixed: Boolean,
      focus: Boolean,
      center: Boolean,
      isLink: Boolean,
      leftIcon: String,
      disabled: Boolean,
      autosize: Boolean,
      readonly: Boolean,
      required: Boolean,
      iconClass: String,
      clearable: Boolean,
      inputAlign: String,
      customClass: String,
      confirmType: String,
      confirmHold: Boolean,
      errorMessage: String,
      placeholder: String,
      customStyle: String,
      useIconSlot: Boolean,
      useButtonSlot: Boolean,
      showConfirmBar: {
        type: Boolean,
        value: true
      },
      placeholderStyle: {
        type: String,
        value: ''
      },
      adjustPosition: {
        type: Boolean,
        value: true
      },
      cursorSpacing: {
        type: Number,
        value: 50
      },
      maxlength: {
        type: Number,
        value: -1
      },
      type: {
        type: String,
        value: 'text'
      },
      border: {
        type: Boolean,
        value: true
      },
      titleWidth: {
        type: String,
        value: '90px'
      }
    },
    data() {
      return {}
    },
    attached() {
    },
    methods: {
      onChange(e) {
        this.setData({
          mtLive: e.detail
        })
      },
      mtLiveSet(newval, oldval, newValIsNull) {
        wx.nextTick(() => {
          this.setData({
            value: newval
          })
          this.$native.emit('change', newval)
        })
      }
    },
  }
</script>

<style lang="less">
</style>
